import { useState } from 'react';
import './MaterialNav.css';

const navData = [
  {
    icon: '📦',
    title: '广告设计',
    items: ['海报设计', '展板设计', '背景素材', '元素素材', '节日海报', 'LOGO', '单页折页'],
  },
  {
    icon: '🎬',
    title: '视频音频',
    items: ['AE模板', '抖音视频', '巨幕视频', '背景视频', '影视配乐', '广告配乐'],
  },
  {
    icon: '💻',
    title: '线上营销',
    items: ['线上海报', 'H5长图', 'banner', '公众号', '小红书', 'icon图标', '网页界面'],
  },
  {
    icon: '📄',
    title: '办公文档',
    items: ['求职简历', '人事相关', '行政相关', '商务汇报', '教育培训', '手绘小报', '颁奖典礼'],
  },
  {
    icon: '🛒',
    title: '电商淘宝',
    items: ['详情页', '手机端', 'C4D海报', '首页模板', '促销海报', '促销海报', '弹窗挂件'],
  },
  {
    icon: '📷',
    title: '摄影图',
    items: ['自然风景', '餐饮美食', '建筑空间', '人像摄影', '生活方式', '商务办公', '医疗健康'],
  },
  {
    icon: '🎞️',
    title: '插画动画',
    items: ['情感表达', '节日节气', '教育文化', '动态概念', '动态插画', '科技感', '动态二维码'],
  },
  {
    icon: '🏠',
    title: '装饰装修',
    items: ['背景墙', '文化墙', '装饰画', '地面瓷砖', '导视标识', '家居软装'],
  },
  {
    icon: '🔤',
    title: '字体',
    items: ['楷体', '黑体', '宋体', '创意字体', '拼音字体', '手写字体', '中国风字体'],
  },
  {
    icon: '🧊',
    title: '3D素材',
    items: ['3D元素', '3D海报', '3D背景', '美陈雕塑', '材质贴图', '室内景观', '样机模型'],
  },
];

const MaterialNav = () => {
  const [showMenu, setShowMenu] = useState(false);

  return (
    <div
      className="material-nav"
      onMouseEnter={() => setShowMenu(true)}
      onMouseLeave={() => setShowMenu(false)}
    >
      <span className="material-nav-title">
        素材导航
        <span className="material-nav-arrow">▲</span>
      </span>
      {showMenu && (
        <div className="material-nav-menu">
          <div className="material-nav-content">
            {navData.map((group, idx) => (
              <div className="material-nav-group" key={idx}>
                <div className="material-nav-group-title">
                  <span className="material-nav-icon">{group.icon}</span>
                  <span>{group.title}</span>
                </div>
                <div className="material-nav-items">
                  {group.items.map((item, i) => (
                    <span className="material-nav-item" key={i}>{item}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default MaterialNav; 